<template>
	<view class="content">
		<u-notice-bar :text="text1"></u-notice-bar>
		<view class="con_top">
			<view class="item">
				<text>每日电价：</text>
				<u--input placeholder="请输入电价" border="bottom" type="number" v-model="dayDianjia"></u--input>
				<view class="houzhi">
					元
				</view>
			</view>
			<view class="item">
				<text>设备功率：</text>
				<u--input placeholder="请输入功率" border="bottom" type="number" v-model="gonglu"></u--input>
				<view class="houzhi">
					瓦
				</view>
			</view>
			<view class="item">
				<text>每日使用：</text>
				<u--input placeholder="请选择每日使用时间" border="bottom" v-model="dayTime" :disabled="true"></u--input>
				<view class="houzhi">
					<u-icon name="arrow-down-fill" color="#a4a5a7" @click="openDay"></u-icon>
				</view>
			</view>
			<view class="item">
				<text>每月使用：</text>
				<u--input placeholder="请选择每月使用时间" border="bottom" v-model="monTime" :disabled="true"></u--input>
				<view class="houzhi">
					<u-icon name="arrow-down-fill" color="#a4a5a7" @click="openMon"></u-icon>
				</view>
			</view>
			<u-button type="primary" :plain="true" @click="openModel()" text="计算电价"></u-button>

			<!-- #ifdef MP-BAIDU -->
			<view class="wrap">
				<view class="card-area">
					<video class="video" id="myVideo" objectFit="cover"
						poster="https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/video_cover.90f71a8.png"
						src="https://b.bdstatic.com/miniapp/development_tool/Smartprogram.mp4">
						<cover-view s-if="!isEnded" class="ad-container">
							<!-- 蒙层 -->
							<cover-view class="ad-mask">
							</cover-view>
							<!--提示按钮 -->
							<button class="ad-button" type="primary" @click="showad">观看15秒广告，解锁完整视频</button>
						</cover-view>
					</video>
				</view>
			</view>
			<!-- #endif -->
		</view>


		<!-- 计算结果 -->
		<view class="con_top">
			<view class="item">
				<text>每月用电量：</text>
				<u--input border="bottom" :disabled="true" v-model="jgDayWa"></u--input>
				<view class="houzhi">
					瓦
				</view>
			</view>
			<view class="item">
				<text>每年用电量大约：</text>
				<u--input border="bottom" :disabled="true" v-model="jgMonWa"></u--input>
				<view class="houzhi">
					瓦
				</view>
			</view>
			<view class="item">
				<text>每月电费大约：</text>
				<u--input border="bottom" :disabled="true" v-model="jgMonYuan"></u--input>
				<view class="houzhi">
					元
				</view>
			</view>
			<view class="item">
				<text>每年电费大约：</text>
				<u--input border="bottom" :disabled="true" v-model="jgYearYuan"></u--input>
				<view class="houzhi">
					元
				</view>
			</view>



		</view>


		<!-- 遮罩 -->
		<u-picker :show="show" :columns="columns" keyName="labelDay" :closeOnClickOverlay="true" @close="closePic"
			@cancel="cancelPic" @confirm="confirmPic">
		</u-picker>
		<u-picker :show="showMon" :columns="columnsMon" keyName="labelMon" :closeOnClickOverlay="true"
			@close="closePicMon" @cancel="cancelPicMon" @confirm="confirmPicMon">
		</u-picker>

		<!-- toast 提示框 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 模态框 -->
		<u-modal :show="modalShow" :title="modalTitle" confirmText="查看结果" cancelText="取消" :showCancelButton="true"
			@confirm="modalConfirm()" @cancel="modalCancel()" :content='content'></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ad: null,
				modalShow: false,
				modalTitle: "温馨提示",
				content: "请完成激励视频广告的观看，体验查询电价功能！",
				dayDianjia: null,
				gonglu: null,
				isCanJs: false, //是否可以开始计算
				dayTime: '',
				monTime: '',
				dayTimeId: null,
				monTimeId: null,
				text1: "欢迎来到电价计算小程序！！！",
				show: false,
				showMon: false,
				jgDayWa: null,
				jgMonWa: null,
				jgMonYuan: null,
				jgYearYuan: null,
				src: 'https://b.bdstatic.com/miniapp/development_tool/Smartprogram.mp4',
				isEnded: false,
				rewardedVideoAd: null,
				posterSrc: 'https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/video_cover.90f71a8.png',
				columns: [
					[{
							labelDay: '1小时',
							id: 1
						},
						{
							labelDay: '2小时',
							id: 2
						},
						{
							labelDay: '3小时',
							id: 3
						},
						{
							labelDay: '4小时',
							id: 4
						},
						{
							labelDay: '5小时',
							id: 5
						},
						{
							labelDay: '6小时',
							id: 6
						},
						{
							labelDay: '7小时',
							id: 7
						},
						{
							labelDay: '8小时',
							id: 8
						},
						{
							labelDay: '9小时',
							id: 9
						},
						{
							labelDay: '10小时',
							id: 10
						},
						{
							labelDay: '11小时',
							id: 11
						},
						{
							labelDay: '12小时',
							id: 12
						},
						{
							labelDay: '13小时',
							id: 13
						},
						{
							labelDay: '14小时',
							id: 14
						},
						{
							labelDay: '15小时',
							id: 15
						},
						{
							labelDay: '16小时',
							id: 16
						},
						{
							labelDay: '17小时',
							id: 17
						},
						{
							labelDay: '18小时',
							id: 18
						},
						{
							labelDay: '19小时',
							id: 19
						},
						{
							labelDay: '20小时',
							id: 20
						},
						{
							labelDay: '21小时',
							id: 21
						},
						{
							labelDay: '22小时',
							id: 22
						},
						{
							labelDay: '23小时',
							id: 23
						},
						{
							labelDay: '24小时',
							id: 24
						},

					]
				],
				columnsMon: [
					[{
							labelMon: '1天',
							id: 1
						},
						{
							labelMon: '2天',
							id: 2
						},
						{
							labelMon: '3天',
							id: 3
						},
						{
							labelMon: '4天',
							id: 4
						},
						{
							labelMon: '5天',
							id: 5
						},
						{
							labelMon: '6天',
							id: 6
						},
						{
							labelMon: '7天',
							id: 7
						},
						{
							labelMon: '8天',
							id: 8
						},
						{
							labelMon: '9天',
							id: 9
						},
						{
							labelMon: '10天',
							id: 10
						},
						{
							labelMon: '11天',
							id: 11
						},
						{
							labelMon: '12天',
							id: 12
						},
						{
							labelMon: '13天',
							id: 13
						},
						{
							labelMon: '14天',
							id: 14
						},
						{
							labelMon: '15天',
							id: 15
						},
						{
							labelMon: '16天',
							id: 16
						},
						{
							labelMon: '17天',
							id: 17
						},
						{
							labelMon: '18天',
							id: 18
						},
						{
							labelMon: '19天',
							id: 19
						},
						{
							labelMon: '20天',
							id: 20
						},
						{
							labelMon: '21天',
							id: 21
						},
						{
							labelMon: '22天',
							id: 22
						},
						{
							labelMon: '23天',
							id: 23
						},
						{
							labelMon: '24天',
							id: 24
						},
						{
							labelMon: '25天',
							id: 25
						},
						{
							labelMon: '26天',
							id: 26
						},
						{
							labelMon: '27天',
							id: 27
						},
						{
							labelMon: '28天',
							id: 28
						},
						{
							labelMon: '29天',
							id: 29
						},
						{
							labelMon: '30天',
							id: 30
						},
					]
				],
			}
		},
		onLoad() {
			// 创建实例
			this.ad = tt.createRewardedVideoAd({
				adUnitId: "z8uovxiynqe6mpeu2q",
			});
			console.log('现在是在抖音里面')


			// 百度小程序创建广告

			// let videoAd = null;
			// if (uni.createRewardedVideoAd) {
			// 	// 完整示例可参考 RewardedVideoAd：（https://smartprogram.baidu.com/docs/develop/api/ad/swan-createRewardedVideoAd/）
			// 	// adUnitId 和 appSid 需要在百青藤平台上获取，打开代码片段时注意需要更改为对应的 appid 使用
			// 	videoAd = uni.createRewardedVideoAd({
			// 		adUnitId: '18130200'
			// 	});

			// 	console.log('百度')
			// }
			// this.videoAd = videoAd

			// this.rewardedVideoAd = swan.createRewardedVideoAd({
			// 	adUnitId: '18130200'
			// });

			// this.rewardedVideoAd.onLoad(() => {
			// 	console.log('激励视频广告加载成功');
			// });

			// this.rewardedVideoAd.onError((err) => {
			// 	console.log('激励视频广告加载失败', err);
			// });

			// this.rewardedVideoAd.onClose((res) => {
			// 	if (res && res.isEnded) {
			// 		console.log('用户看完了激励视频广告，给予奖励');
			// 	} else {
			// 		console.log('用户未看完激励视频广告，不给予奖励');
			// 	}
			// });

		},
		mounted() {
			// 监听错误
			// #ifdef MP-TOUTIAO
			this.ad.onError(err => {
				tt.hideLoading();
				console.log(err)
				switch (err.errCode) {
					case 1004:
						// 无合适的广告
						this.$refs.uToast.show({
							type: "error",
							message: "无合适的广告展示，已经为您跳过广告",
						})
						this.jisuan()
						break;
					default:
				}
			});

			// 监听视频播放完成
			this.ad.onClose(data => {
				tt.hideLoading();
				if (data.isEnded) {
					console.log('观看了', data.count, '个视频');
					this.jisuan()
				} else {
					console.log('未观看完视频');
					this.$refs.uToast.show({
						type: "error",
						message: "请完成广告观看，才可以使用该功能",
					})
				}
			});

			// 预加载资源
			this.ad.load();
			//#endif
		},
		methods: {
			showad() {
				// 百度小程序加载广告
				// this.rewardedVideoAd.show().catch((err) => {
				// 	this.rewardedVideoAd.load().then(() => {
				// 		this.rewardedVideoAd.show();
				// 	});
				// });
			},
			//打开每天选择遮罩
			openDay() {
				this.show = true
			},
			//打开每月选择遮罩
			openMon() {
				this.showMon = true
			},

			closePic() {
				this.show = false
			},
			cancelPic() {
				this.show = false
			},
			confirmPic(e) {
				this.dayTime = e.value[0].labelDay
				this.dayTimeId = e.value[0].id
				this.show = false
			},

			closePicMon() {
				this.showMon = false
			},
			cancelPicMon() {
				this.showMon = false
			},
			confirmPicMon(e) {
				this.monTime = e.value[0].labelMon
				this.monTimeId = e.value[0].id
				this.showMon = false
			},
			//打开遮罩
			openModel() {
				this.modalShow = true
				// 百度小程序加载广告
				// if (swan.createRewardedVideoAd) {
				// 	// this.videoAd.onLoad();
				// 	// console.log('百度')
				// 	this.ad.show()
				// }


			},
			//遮罩点击确认
			modalConfirm() {
				this.modalShow = false
				
				// #ifdef MP-TOUTIAO
				this.isCanJisuan()
				
				// #endif

				// this.isCanJisuan()
			},
			//遮罩点击取消
			modalCancel() {
				this.modalShow = false
			},

			//判断数据是否输入并查看广告
			isCanJisuan() {
				if (this.dayDianjia == null || this.dayDianjia == '') {
					this.$refs.uToast.show({
						type: "error",
						message: "请输入每日电价",
					})
				} else if (this.gonglu == null || this.gonglu == '') {
					this.$refs.uToast.show({
						type: "error",
						message: "请输入每日功率",
					})
				} else if (this.dayTimeId == null || this.dayTimeId == '') {
					this.$refs.uToast.show({
						type: "error",
						message: "请选择每日用电时间",
					})
				} else if (this.monTimeId == null || this.monTimeId == '') {
					this.$refs.uToast.show({
						type: "error",
						message: "请选择每月用电天数",
					})
				} else {
					// #ifdef MP-TOUTIAO
					tt.showLoading();
					this.ad.show();
					this.jisuan()
					// #endif
					// #ifdef H5
					this.jisuan()
					// #endif
				}
			},

			//计算电价
			jisuan() {
				this.jgDayWa = this.gonglu * parseInt(this.dayTime, 10) * parseInt(this.monTime, 10)
				this.jgMonWa = this.jgDayWa * 12
				this.jgMonYuan = this.jgDayWa * this.dayDianjia
				this.jgYearYuan = this.jgMonYuan * 12
				// this.$refs.uToast.show({
				// 	type: "success",
				// 	message: "电价计算成功",
				// })
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: #f3f4f6;
		height: 100vh;
		width: 100vw;
	}

	.con_top {
		width: 90%;
		margin: 10px auto 0;
		background: #fff;
		border-radius: 10px;
		padding: 30px 10px 10px;

		.item {
			position: relative;
			margin-bottom: 8px;

			.houzhi {
				position: absolute;
				right: 10px;
				bottom: 10px;
				// transform: translate(0px, -50%);
				color: #a4a5a7;
			}
		}
	}
</style>